import React, { Component } from 'react';
import './index.css'
class Iteam extends Component {

    state={isChoice:false}
    mouseMove=(flag)=>{
       this.setState({isChoice:flag})
      
    }
    changeStatus=(id)=>{
      return (event)=>{
           const isChecked=event.target.checked;
           this.props.updateTodo(id,isChecked)
      }
    }

    deleteTodo=(id)=>{
       return ()=>{
        const {deleteTodo}=this.props;
        deleteTodo(id)
       }

    }

    render() {
        const {isChoice}=this.state;
        const {id,name,done}=this.props;
        return (
            <li onMouseLeave={()=>{this.mouseMove(false)}} onMouseEnter={()=>{this.mouseMove(true)}} style={{backgroundColor:isChoice?'#ddd':'white'}}>
                <label key={id}>
                <input type="checkbox" checked={done} onChange={this.changeStatus(id)}/>
                <span>{name}</span>
                </label>
                <button className="btn btn-danger" onClick={this.deleteTodo(id)} style={{display:isChoice?'block':'none'} }>删除</button>
            </li>
        );
    }
}

export default Iteam;